<template>
    <div>
        <el-form v-if="view" ref="editForm" label-width="110px" :model="editForm" class="editForm">
            <div class="block">
                <div>
                    <div>
                        <el-upload action='/api/user/userPhotoUpload' list-type="picture-card" :show-file-list="false"
                            :on-success="successPhoto">
                            <el-avatar :size="76" :src="circleUrl"></el-avatar>
                        </el-upload>

                    </div>
                </div>
                <span style="margin-left: 1rem;">{{ editForm.userName }}</span>
                <div>
                    <el-button size="mini" class="margin-l-25" @click="passwordEdit">修改密码</el-button>
                </div>
            </div>
            <span class="changeAvatar">{{ '更换头像' }}</span>
            <el-form-item :label="phone1" prop="phone">
                <el-input v-model="editForm.phone" readonly style="width: 11rem;"></el-input>
                <el-button v-if="!mobile" type="primary" class="margin-l-25" @click="mobileEdit">修改手机号</el-button>
                <el-button v-if="mobile" type="primary" class="margin-l-25" @click="mobileCancal">取消修改</el-button>
            </el-form-item>
            <el-form-item v-if="mobile" label="新手机号" prop="phone2">
                <el-input v-model="editForm.phone2" style="width: 11rem;"></el-input>
            </el-form-item>
            <el-form-item v-if="mobile" label="验证码" prop="phone">
                <el-input v-model="yzm" style="width: 6rem"></el-input>
                <el-button type="primary" class="margin-l-25">发送验证码</el-button>
            </el-form-item>
            <el-form-item label="地址" prop="address">
                <el-input v-model="editForm.address" type="text" style="width: 22rem;"></el-input>
            </el-form-item>
            <el-form-item label="关联公司" prop="companyName">
                <el-input v-model="editForm.companyName" readonly style="width: 11rem;"></el-input>
            </el-form-item>
            <el-form-item label="职位" prop="role">
                <el-input v-model="editForm.role" readonly style="width: 11rem;"></el-input>
            </el-form-item>
            <el-row :gutter="24">
                <el-col :span="6">
                    <el-form-item label="个人印章" prop="userChapter">
                        <el-upload class="avatar-uploader" :action='actionChapter' list-type="picture-card"
                            :show-file-list="false" :on-success="userChapterSuccess">
                            <img v-if="chapterUrl" :src="chapterUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <div>
                        <el-form-item label="资质证书" prop="userZzzs">
                            <el-upload class="avatar-uploader" :action='actionZzzs' list-type="picture-card"
                                :show-file-list="false" :on-success="userZzzsSuccess">
                                <img v-if="zzzsUrl" :src="zzzsUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-form-item>
                <el-button @click="editClose">取消</el-button>
                <el-button type="primary" @click="submit">保存
                </el-button>
            </el-form-item>
        </el-form>
        <PersonalPasswd ref="personalPasswd" v-if="passwordShow" :passwordShow="passwordShow" :password="password"
            @dialogClose="dialogClose"></PersonalPasswd>

    </div>
</template>
 
<script>
import PersonalPasswd from './personalPasswd.vue'
import {
    updatePersonal
} from '@/api/personal/user';
export default {
    name: "PersonalProfil",
    components: { PersonalPasswd },
    props: {
        record: {
            type: Object
        }
    },
    data () {
        return {
            view: true,
            circleUrl: '',
            editForm: {},
            phone1: '手机号码',
            mobile: false,
            actionZzzs: '/api/user/userZzzsUpload',
            actionChapter: '/api/user/userChapterUpload',
            zzzsUrl: '',
            chapterUrl: '',
            passwordShow: false,
            password: ''
        }
    },
    methods: {
        userEdit () {
            this.editForm = Object.assign({}, this.userForm)
        },
        passwordEdit () {
            this.passwordShow = true
            this.password = this.editForm.password
        },
        mobileEdit () {
            this.mobile = true
            this.phone1 = '原手机号'
        },
        mobileCancal () {
            // this.passwordEdit = false
            this.mobile = false
        },
        dialogClose () {
            this.passwordShow = false
        },
        editClose () {
            this.view = false
            this.$emit('editClose')
        },
        successPhoto (file) {
            this.circleUrl = file.data;
            this.editForm.userPhoto = file.data;
        },
        userChapterSuccess (file) {
            this.chapterUrl = file.data;
            this.editForm.userChapter = this.chapterUrl;
        },
        userZzzsSuccess (file) {
            this.zzzsUrl = file.data;
            this.editForm.userZzzs = this.zzzsUrl;
        },
        submit () {
            this.$refs.editForm.validate((valid) => {
                if (valid) {
                    updatePersonal(this.editForm).then((res) => {
                        if (res) {
                            localStorage.setItem('userPhoto',this.circleUrl)
                            this.$router.go(0)
                            // this.$emit('gettest')
                            // this.$emit('editClose')
                        }
                    })
                }
                else {
                    return
                }
            })
        },
    },
    mounted () {
        this.editForm = Object.assign({}, this.record)
        if (this.editForm.userPhoto) {
            this.circleUrl = this.editForm.userPhoto
        } else {
            this.circleUrl = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
        }
        this.zzzsUrl = this.editForm.userZzzs
        this.chapterUrl = this.editForm.userChapter
    }

}
</script>

<style scoped lang="less">
// /deep/ .el-input--medium .el-input__inner {
//     width: 11rem;
// }
.el-form {
    padding-left: 1rem;
    padding-bottom: 0;
}

/deep/ .el-form-item__label {
    font-size: 14px;
}

.block {
    width: 100%;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;

    :deep .el-upload--picture-card {
        border: none;
        width: 76px;
        height: 76px;
        border-radius: 50%;
        line-height: 76px;
    }
}

span {
    line-height: 76px;
    // margin-left: 1rem;
}

.avatar {
    width: 146px;
    height: 146px;
    object-fit: contain;
    display: block;
}

.changeAvatar {
    display: block;
    color: #eee;
    font-size: 10px;
    line-height: 22px;
    width: 76px;
    text-align: center;
    position: absolute;
    top: 130px;
    z-index: 999;
    background-color: rgba(0, 0, 0, .7);
    // cursor: pointer;

}
</style>
